<template>
	<view class="page">
		<view v-if="poster">
			<view style="font-size: 0;">
				<image class="poster" :src="poster"></image>
				<image src="/static/images/share-operation.png" style="width:750rpx;height:210rpx;" aspectFit></image>
			</view>
			<view class="operation">
				<!-- #ifdef MP-WEIXIN -->
				<button class="btn" open-type="share">分享好友</button>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="btn" @click="toShare">分享好友</view>
				<!-- #endif -->
				<button class="btn" @click="saveImage()">保存图片</button>
			</view>
		</view>
		<view v-else>{{ errMsg }}</view>
		<l-painter style="position: fixed;left: -2000px;" isCanvasToTempFilePath :board="shareBoard" @success="success"
			@fail="fail"></l-painter>
	</view>
</template>

<script>

	export default {
		data() {
			return {
				user: {},
				shareBoard: {
					css: {
						width: '750rpx',
						height: '1230rpx'
					},
					views: []
				},
				poster: null,
				errMsg: ''
			};
		},
		onLoad(options) {
			this.init();
		},
		methods: {
			init() {
				this.boardView();
			},
			boardView(code) {
				uni.showLoading({
					title: '海报生成中',
					mask: true
				});
				var board = {
					css: {
						width: '750rpx',
						height: '1230rpx',
						backgroundColor: '#FFFFFF'
					},
					views: []
				};
				board.views = [{
						type: 'image',
						src: 'https://h5.wmel.cn/upload/20231127102955.png',
						css: {
							left: '0rpx',
							top: '0rpx',
							width: '750rpx',
							height: '1230rpx'
						}
					},
					{
						type: 'image',
						src: 'https://h5.wmel.cn/upload/screenshot-20231123-192147.png',
						css: {
							position: 'fixed',
							left: '275rpx',
							top: '964rpx',
							width: '200rpx',
							height: '200rpx'
						}
					},
				];
				this.shareBoard = board;
			},
			//加载画板失败
			fail(v) {
				console.log('fail', v);
				this.errMsg = JSON.stringify(v);
				uni.hideLoading();
			},
			//加载画板成功
			success(s) {
				this.poster = s;
				uni.hideLoading();
			},
			saveImage() {
				uni.saveImageToPhotosAlbum({
					filePath: this.poster,
					success: res => {
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						});
					},
					fail: err => {
						uni.showToast({
							title: '保存失败',
							icon: 'none'
						});
					}
				});
			},
			toShare() {
				uni.share({
					provider: 'weixin',
					scene: 'WXSceneSession',
					type: 5,
					imageUrl: this.$shareImageUrl,
					title: this.$shareContent,
					miniProgram: {
						id: this.$shareMiniId,
						path: `/pages/LoginPages/mylogin/main?inviteCode=${this.user.invitationCode}`,
						type: 0, //0-正式版； 1-测试版； 2-体验版
						webUrl: this.$shareWebUrl
					},
					success: ret => {
						console.log(ret);
					},
					fail(err) {
						console.log(err);
					}
				});
			}
		},
		onShareAppMessage() {
			const path = `/pages/LoginPages/mylogin/main?inviteCode=${this.user.invitationCode}`;
			return {
				title: this.$shareContent,
				imageUrl: this.$shareImageUrl,
				path: path
			};
		},
		onShareTimeline () {
			return {
				title: this.$shareContent,
				imageUrl: this.$shareImageUrl,
				query: `inviteCode=${this.user.invitationCode}`
			};
		}
	};
</script>

<style lang="less" scoped>
	.page {
		position: relative;

		.poster {
			width: 750upx;
			height: 1334upx;
		}

		.operation {
			position: absolute;
			bottom: 64upx;
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.btn {
				margin: 0 15upx;
				width: 310upx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				color: #ffffff;
				font-size: 36rpx;
				border-radius: 50rpx;
				background-color: #32C59A;

				&:last-child {
					color: #32C59A;
					border: 1upx solid #32C59A;
					background-color: #ffffff;
				}
			}
		}
	}
</style>